<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css</title>

    <!--
        第二中方法
            - 将样式写到head中style标签中
            然后通过css的选择器来选中元素并且为其设置各种样式
            可以同时为多个标签设置样式，并且修改时只需要修改一处即可

        复合选择器：
        div.red{
            color:red
        }
    -->
    <style>
        .a.b.c{
            color: aqua;
        }

        /*
        * 同时选择多个选择器
        */
        h1,span{
            color: burlywood;
        }
    </style>
</head>
<body>
    
    <!--
        网页分为三个部分
            结构（HTML）
            表现（css）
            行为（javascript）

        css 
            层叠样式表
            网页实际上是一个多层的结构，通过css可以分别为网页的每一层设置样式
                而最终我们能看到只是网页中最上边一层
            总之一句话，css用来设置网页红元素的样式

    -->

    <!--
        使用css来改变样式
        第一种方式（内联样式，行内样式）；
            - 在标签内部通过style属性来设置元素的样式
            问题：
                使用内联样式，样式只能对一个标签生效
                如果希望影响到多个元素必须在每一个元素中都复制一遍
                并且当样式发生变化时，我们必须要一个个的修改，非常的不方便

            - 注意
                开发的时候绝对不要使用内联样式
    -->

    <div class="red">
        我是红色
    </div>

    <div class="a b c">
        交集选择器
    </div>

    <div>
        <h1>我是h1</h1>
        <span>我是span</span>
    </div>

</body>
</html>